{% extends 'tend/account/common/base.html' %}
{% import "tend/macros/_flash.html" as flash_macros %}
{% block css %}
{{super()}}
<link href="{{ url_for('main.static', filename='css/account.css')}}" rel="stylesheet">
<style>
  .avatar {
    width: 80px;
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
  }

  .select-avt {
    border: 1px solid rgb(202, 98, 14);
    box-shadow: 5px 5px 5px rgba(0.0.0, .5);
  }
</style>
{% endblock %}
{% block contents %}

<div class="container">
  <div class="row justify-content-md-center mt-5">
    <div class="col-md-8">
      {{flash_macros.flash_msg()}}
      <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="form-group row">
          <label for="name" class="col-sm-2 col-form-label">昵称:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="name" placeholder="昵称"
              value="{{current_user.name or current_user.username}}">
          </div>
        </div>
        <div class="form-group row">
          <label for="mobile" class="col-sm-2 col-form-label">手机:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="mobile" placeholder="手机"
              value="{{current_user.mobile or ''}}">
          </div>
        </div>
        <div class="form-group row">
          <label for="avatar" class="col-sm-2 col-form-label">头像:</label>
          <div class="col-sm-10">
            <input type="hidden" name="avatar" value="{{current_user.avatar}}">
            <div class="">
              <div class="float-left mr-2">
                <img id="avatar-img" src="{{current_user.avatar or url_for('main.static', filename='img/avatar.png')}}"
                  class="rounded mx-auto d-block avatar" alt="{{current_user.name}}">
                <div class="text-center">
                  <a href="#" onclick="show_avt_div()" id="avt-action">选择头像</a>
                </div>
              </div>
              <!--图片列表-->
              <div id="avt-div" class="row border p-1 border-warning" style="display: none;">
                {% for img_url in
                ['1.webp','2.webp','3.webp','4.webp','5.webp','6.webp','7.webp','8.webp','9.webp','10.webp','11.webp','12.webp','13.webp','14.webp','15.webp','16.webp','17.webp','18.webp','19.webp','20.webp']%}
                <img src="{{url_for('main.static',filename='img/avatar/'+ img_url)}}" data-src="{{url_for('main.static',filename='img/avatar/'+ img_url)}}"
                  class="avt rounded mx-auto d-block avatar m-1" style="height: 80px; padding:5px;" alt="">
                {% endfor %}
              </div>
            </div>

          </div>
        </div>

        <div class="form-group row">
          <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </div>
      </form>
    </div>

  </div>


</div>
{% endblock %}
{% block js %}
{{ super() }}
<script>
  $(function () {
    $('img.avt').click(function () {
      $('img.avt').removeClass('select-avt')
      $(this).addClass('select-avt')
      //替换图片
      let img_src = $(this).prop('src');
      $('#avatar-img').prop('src', img_src)
      $('input[name="avatar"]').val($(this).data('src'))
    });
  });
  function show_avt_div() {
    if ($('#avt-div').is(":visible")) {
      $('#avt-div').hide();
      $('#avt-action').text('选择头像')
    } else {
      $('#avt-div').show();
      $('#avt-action').text('关闭选项')
    }

  }
</script>
{% endblock %}